<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--设置网页在浏览器上的标题 -->
    <title>前端开发课程设计</title>
<!--    设置网页在浏览器上的图标-->
    <link href="./img/logo.jpg" rel="icon">
    <style>
        body{
            margin: 0;
            padding: 0;
            background-image: url("./img/school.jpg");
            background-size: cover;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
        div>h1{
            text-align: center;
            font-size: 48px;
            color: #000;
            letter-spacing: 10px;
        }
        div.row-a{
            /* 弹性盒子布局 */
            display: flex;
        }
        div.row-a>p{
            font-size: 36px;
            color: aliceblue;
            margin: 5px 0;
        }
        div.row-a>.left{
            flex: 1;
            text-align: right;
            margin-right: 30px;
        }
        div.row-a>.right{
            flex: 1.1;
            margin-left: 30px;
        }
        div>button.btn{
            font-size: 28px;
            color: #fff;
            background-color: #30b761;
            border-radius: 5px;
            border: none;
            padding: 5px 10px;
            margin: 0 20px;
        }
        div>button.btn:hover{
            background-color: #2e9352;
        }
    </style>
</head>
<body>
<!--   标题，一组文本（4行），一组button（2个） -->
    <div>
        <h1>前端开发课程设计</h1>
        <div>
            <div class="row-a">
                <p class="left">班级</p>
                <p class="right">20214123</p>
            </div>
            <div class="row-a">
                <p class="left">学号</p>
                <p class="right">202141234123</p>
            </div>
            <div class="row-a">
                <p class="left">姓名</p>
                <p class="right">卧龙</p>
            </div>
            <div class="row-a">
                <p class="left">头像</p>
                <div class="right">
                    <img style="margin-top: 5px; width: 50px;
                    height: 50px; border-radius: 50%"
                         src="./img/picture.jpg" alt="">
                </div>
            </div>
        </div>
        <div style="text-align: center;margin-top: 20px;padding-left: 80px">
            <button class="btn" onclick="location.href='huijiawang.html'">回家网</button>
            <button class="btn" onclick="location.href='yikatong.html'">一卡式管理系统</button>
        </div>
    </div>
</body>
</html>